<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>员工分页列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f4f6f9;
            margin: 0;
            padding: 40px;
            color: #333;
        }

        /*****导航****/
        /* 添加在 <style> 中 */
        .navbar {
            background-color: #409EFF;
            padding: 12px 20px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            border-radius: 8px;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            text-align: left;
        }
        .navbar a {
            color: #fff;
            text-decoration: none;
        }
        .navbar a:hover {
            text-decoration: underline;
        }
        /***************/

        /*添加员工*/
        .modal-save {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }


        .modal-content {
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }


        .modal-content h3, .modal-content h4 {
            margin-top: 0;
        }

        .modal-content label {
            display: block;
            margin-top: 10px;
            font-weight: 600;
        }

        .modal-content input, .modal-content select {
            width: 100%;
            padding: 8px;
            margin-top: 4px;
            margin-bottom: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
        }


        h2 {
            text-align: center;
            color: #2c3e50;
        }

        .search-bar {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .search-bar label {
            margin-right: 5px;
            font-weight: 600;
        }

        .search-bar input,
        .search-bar select {
            padding: 8px 12px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 6px;
            outline: none;
            transition: border-color 0.2s;
        }

        .search-bar input:focus,
        .search-bar select:focus {
            border-color: #409EFF;
        }

        .search-bar button {
            background-color: #409EFF;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 8px 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .search-bar button:hover {
            background-color: #66b1ff;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        th, td {
            border: 1px solid #ebebeb;
            padding: 12px 8px;
            text-align: center;
        }

        th {
            background-color: #f0f4f8;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f9fafb;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 30px;
        }

        .pagination button {
            background-color: #409EFF;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 6px 12px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .pagination button[disabled] {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .pagination span {
            font-weight: 500;
        }

        p {
            text-align: center;
            font-style: italic;
            color: #888;
        }
        /*  头像上传  */
        #avatar-upload {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px dashed #ccc;
            cursor: pointer;
        }

        #avatarPreview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        img {
            width: 50px;
            height: 50px;
        }


        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content {
            background: white;
            width: 500px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 8px;
        }
        .project-item {
            margin-top: 10px;
            padding: 10px;
            background: #f3f3f3;
        }


    </style>
</head>
<body>
<div id="app">
    <!--<导航栏>-->
    <div class="navbar">
        <a href="/index.html">🏠 返回主页</a>
    </div>
    <h2>员工列表</h2>
    <!--搜索栏-->
    <form class="search-bar">
        <div>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchEmp.name" />
        </div>

        <div>
            <label for="gender">性别:</label>
            <select id="gender" name="gender" v-model="searchEmp.gender">
                <option value="">不限</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>

        <div>
            <label for="department">部门:</label>
            <select id="department" name="department" v-model.number="searchEmp.deptId">
                <option value="">无</option>
                <option v-for="dept in depts" :key="dept.id" :value="dept.id">
                    {{ dept.name }}
                </option>
            </select>
        </div>

        <div>
            <label for="startTime">开始时间:</label>
            <input type="date" id="startTime" placeholder="请输入开始时间" v-model="searchEmp.startDate" />
            <label for="endTime">结束时间:</label>
            <input type="date" id="endTime"  placeholder="请输入开始时间" v-model="searchEmp.endDate" />
        </div>

        <button type="button" @click="search">搜索</button>
    </form>

    <!--  添加员工  -->
    <button @click="showModal = true">添加员工</button>
    <div class="modal-save" v-if="showModal">
        <div class="modal-content">
            <h3>添加员工信息</h3>

            <div>
                <label>头像URL:</label>
                <!--<input v-model="newEmployee.image" type="file">-->
                <div id="avatar-upload">
                    <label for="avatarInput" class="avatar-label">
                        <img id="avatarPreview" :src="newEmployee.image" alt="点击上传头像" />
                    </label>
                    <input type="file" id="avatarInput" accept="image/*" hidden @change="handleAvatarUpload" />
                </div>
            </div>
            <div>
                <label>用户名:</label>
                <input v-model="newEmployee.username" type="text">
            </div>
            <div>
                <label>姓名:</label>
                <input v-model="newEmployee.name" type="text">
            </div>
            <div>
                <label>性别:</label>
                <select v-model="newEmployee.gender">
                    <option value="">不限</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
            <div>
                <label>电话:</label>
                <input v-model="newEmployee.phone" type="text">
            </div>
            <div>
                <label>职位:</label>
                <input v-model="newEmployee.job" type="text">
            </div>
            <div>
                <label>薪资:</label>
                <input v-model="newEmployee.salary" type="number">
            </div>


            <h4>项目经历</h4>
            <div v-for="(proj, index) in newEmployee.children" :key="index" class="project-item">
                <div>
                    <label>开始时间:</label>
                    <input type="date" v-model="proj.begin">
                </div>
                <div>
                    <label>结束时间:</label>
                    <input type="date" v-model="proj.end">
                </div>
                <div>
                    <label>公司:</label>
                    <input type="text" v-model="proj.company">
                </div>
                <div>
                    <label>职位:</label>
                    <input type="text" v-model="proj.job">
                </div>
                <button @click="removeProject(index)">删除该项目</button>
            </div>
            <button @click="addProject">添加项目经历</button>

            <div style="margin-top: 20px;">
                <button @click="submit">提交</button>
                <button @click="showModal = false">取消</button>
            </div>
        </div>
    </div>
    <!--员工表单-->
    <table v-if="emps.length">
        <thead>
        <tr>
            <th>ID</th>
            <th>头像</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>部门</th>
            <th>职位</th>
            <th>薪资</th>
            <th>入职日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="emp in emps" :key="emp.id">
            <td>{{ emp.id }}</td>
            <td>
                <image v-bind:src="emp.image"></image>
            </td>
            <td>{{ emp.username }}</td>
            <td>{{ emp.name }}</td>
            <td>{{ genderMap[emp.gender] }}</td>
            <td>{{ emp.phone }}</td>
            <td>{{ emp.dept }}</td>
            <td>{{ emp.job==null?'无':emp.job }}</td>
            <td>{{ emp.salary==null?'无':emp.salary }}</td>
            <td>{{ emp.entryDate }}</td>
            <<!-- 员工表格中的操作按钮 -->
            <td>
                <div>
                    <button @click="openEditModal(emp)">修改</button>
                    <button @click="deleteEmp(emp.id)">删除</button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <p v-else>暂无数据</p>

    <div class="pagination">
        <button @click="prevPage" :disabled="page === 1">上一页</button>
        <span>第 {{ page }} 页 / 共 {{ totalPages }} 页</span>
        <span>共 {{ total }} 条</span>
        <button @click="nextPage" :disabled="page === totalPages">下一页</button>
    </div>
    <div>部门{{searchEmp.deptId}}</div>
    <div>开始时间{{searchEmp.startTime}}</div>
    <div>结束时间{{searchEmp.endTime}}</div>


    <!-- 弹窗模态框 -->
    <div v-if="showEditModal" class="modal">
        <div class="modal-content">
            <h3>修改员工信息</h3>
            <form @submit.prevent="submitEdit">
                <label>头像：<input type="file" @change="onAvatarChange" /></label><br />
                <img :src="form.image" v-if="form.image" width="80" /><br />

                <label>用户名：<input v-model="form.username" required /></label><br />
                <label>姓名：<input v-model="form.name" required /></label><br />
                <label>性别：
                    <select v-model="form.gender">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </label><br />
                <label>电话：<input v-model="form.phone" /></label><br />
                <label>部门：<input v-model="form.dept" /></label><br />
                <label>职位：<input v-model="form.job" /></label><br />
                <label>薪资：<input v-model="form.salary" type="number" /></label><br />
                <label>入职日期：<input v-model="form.entryDate" type="date" /></label><br />

                <!-- 项目经历部分 -->
                <div v-for="(project, index) in form.projects" :key="index" class="project-item">
                    <h4>项目 {{ index + 1 }}</h4>
                    <label>公司：<input v-model="project.company" /></label><br />
                    <label>职位：<input v-model="project.position" /></label><br />
                    <label>开始时间：<input v-model="project.startDate" type="date" /></label><br />
                    <label>结束时间：<input v-model="project.endDate" type="date" /></label><br />
                    <button @click.prevent="removeProject(index)">删除项目</button><br />
                </div>
                <button @click.prevent="addProject">添加项目经历</button><br /><br />

                <button type="submit">提交</button>
                <button @click="showEditModal = false">取消</button>
            </form>
        </div>
    </div>
</div>



<script>
    new Vue({
        el: '#app',
        data: {
            //修改员工
            showEditModal: false,
            form: {
                id: null,
                image: '',
                username: '',
                name: '',
                gender: '男',
                phone: '',
                dept: '',
                job: '',
                salary: '',
                entryDate: '',
                children: []
            },

            file: '',
            showModal: false,
            newEmployee: {
                username: '',
                name: '',
                gender: '',
                phone: '',
                job: '',
                salary: '',
                image: '',
                children: [],
            },

            searchEmp: {
                name: '',
                gender: '',
                deptId: '',
                startDate: '',
                endDate: ''
            },
            genderMap: {
                1: '男',
                2: '女'
            },
            emps: [],
            depts: [],
            page: 1,
            pageSize: 5,
            total: 0
        },
        computed: {
            totalPages() {
                return Math.ceil(this.total / this.pageSize);
            }
        },
        methods: {
            // 添加员工
            /**********************************/
            addProject() {
                this.newEmployee.children.push({
                    begin: '',
                    end: '',
                    company: '',
                    job: ''
                });
            },
            removeProject(index) {
                this.newEmployee.children.splice(index, 1);
            },
            async submit() {
                console.log('提交的员工信息：', this.newEmployee);

                // 2. 准备 FormData
                const formData = new FormData()
                console.log(this.file);
                formData.append('file', this.file)

                try {
                    // 3. 发送到后端
                    const response = await axios.post('/upload', formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })

                    // 4. 上传成功，使用服务器返回的头像 URL 更新显示（可选）
                    if (response.data.data) {
                        this.newEmployee.image = response.data.data
                    }
                } catch (error) {
                    console.error('上传头像失败:', error)
                }

                axios.post(`/emps`, this.newEmployee).then(response => {
                    alert("提交成功！");
                    this.showModal = false;
                    this.resetForm();
                })



            },
            resetForm() {
                this.newEmployee = {
                    username: '',
                    name: '',
                    gender: '',
                    phone: '',
                    job: '',
                    salary: '',
                    image: '',
                    children: []
                };
            },
            /*********************************/

            fetchEmps() {
                axios.get('/emps', {
                    params: {
                        page: this.page,
                        pageSize: this.pageSize,
                        ...this.searchEmp
                    }
                }).then(response => {
                    this.emps = response.data.data.rows;
                    this.total = response.data.data.total;
                }).catch(error => {
                    console.error("请求失败:", error);
                });
            },
            nextPage() {
                if (this.page < this.totalPages) {
                    this.page++;
                    this.fetchEmps();
                }
            },
            prevPage() {
                if (this.page > 1) {
                    this.page--;
                    this.fetchEmps();
                }
            },
            search() {
                this.page = 1; //搜索时重置页码
                this.fetchEmps();
            },

            //上传头像
            async handleAvatarUpload(event) {

                this.file = event.target.files[0]
                if (!this.file) return

                // 1. 本地预览
                this.newEmployee.image = URL.createObjectURL(this.file)

            },

            //修改员工
            openEditModal(emp) {
                this.form = JSON.parse(JSON.stringify(emp)); // 深拷贝数据
                this.showEditModal = true;
            },
            onAvatarChange(e) {
                const file = e.target.files[0];
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.form.image = event.target.result;
                };
                reader.readAsDataURL(file);
            },
            addProject() {
                this.form.projects.push({ company: '', position: '', startDate: '', endDate: '' });
            },
            removeProject(index) {
                this.form.projects.splice(index, 1);
            },
            submitEdit() {
                // 这里你可以使用 axios 发送 form 数据到后端
                console.log('提交数据：', this.form);
                axios.put('/emps/' + this.form.id, this.form).then(response => {

                })
                this.showEditModal = false;
            },
            //删除员工
            deleteEmp(id) {
                if (confirm("确定要删除该员工吗？")) {
                    // axios.delete(`/api/emp/${id}`) ...
                    axios.delete('/emps/' + this.form.id).then(response => {
                        console.log("已删除：", id);
                    })

                }
            }

        },
        mounted() {
            this.fetchEmps();
        },
        created() {
            axios.get(`/depts`).then(response => {
                this.depts = response.data.data || response.data;
            })

        },


    });
</script>
</body>
</html>
